$(function(){
// 需求一：点击去注册按钮，当前登录盒子隐藏，注册盒子显示
$('.login-box a').on('click',function(){
    $('.login-box').hide().next().show()
})
// 需求二：点击去登录，当前注册盒子隐藏，登录盒子显示
$('.reg-box a').on('click',function(){
    $('.reg-box').hide().prev().show()
})
// 需求三：用户名和密码正则校验，确认密码与密码做相等匹配
    //1.将已有预设元素属性或自定义校验规则名(成员名)添加至input标签
    //2.设置自定义校验规则  
       //2.1 调用自定义校验规则函数 layui.form.verify()
       //2.2 传参定义自己的校验规则
        // 参数是一个对象，该对象成员的属性值可以是数组或方法
        // 2.2.1 属性值是数组：下标0是正则匹配表达式，下标1是匹配失败提示(字符串)
        // 2.2.2 属性值是函数：形参有两个，分别接受表单值和表单dom对象
layui.form.verify({
    username:[
        /^[a-zA-Z0-9]{6,10}$/,
        "用户名为6-10位数字或英文字母"
    ],
    psd:[
        /^[a-zA-Z0-9]{6,12}$/,
        "密码为6-12位数字或英文字母"
    ],
    rePsd:function(value){
        if(value!==$('.reg-box [name="username"]').val()){
            return '两次输入密码不一致'
        }
    }
})

// 需求四：触发注册form的submit事件，收集form表单内容发送请求
$('#formReg').on('submit',function(e){
    e.preventDefault()
    // 根据接口文档，发送POST请求将数据传输至后台
    axios({
        method:'POST',
        url:'/api/reguser',
        // 注意，这里后端只能接受application/x-www-form-urlencoded格式的字符串
        data:$(this).serialize()
    }).then(({data:res})=>{
        console.log(res);
        if(res.status!== 0 ){
            return  layui.layer.msg(res.message)
        }
        // 成功获得相应数据后,跳转登录页
        layui.layer.msg('恭喜您，注册成功')
        $('.reg-box a').click()
    })
})

// 需求五：触发登录form的submit事件，收集form表单内容发送请求
$('#formLogin').on('submit',function(e){
    e.preventDefault()
    // 根据接口文档，发送POST请求将数据传输至后台
    axios({
        method:'POST',
        url:'/api/login',
        // 注意，这里后端只能接受application/x-www-form-urlencoded格式的字符串
        data:$(this).serialize()
    }).then(({data:res})=>{
        console.log(res);
        if(res.status!== 0 ){
            return   layui.layer.msg(res.message)
        }
        // 成功获得相应数据后
       layui.layer.msg('恭喜您，登录成功')
        localStorage.setItem('token',res.token)
        location.href='/index.html'
    })
})
})